<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../src/assets/image2D.png">
    <title>演示-4 | image2D - Drawing Two-Dimensional Pictures Using ECMAScript. </title>
    <meta name="Keywords" content="image2D canvas svg docs api" />
    <meta name="author" content="你好2007" />
    <meta name="email" content="2501482523@qq.com" />
    <script src="https://cdn.jsdelivr.net/npm/image2d"></script>
    <script>
        console.log(
            '\u001B[92m👉   Thank you for using (\u001B[94m https://github.com/hai2007/image2D \u001B[92m) as the Image2D Library! 🍇\u001B[0m\n'
        );;

    </script>
</head>

<body>
        <a href="https://github.com/hai2007/image2D/blob/master/docs/inline/example-4.html" target="_blank">查看源码</a>
    <svg id='painter'></svg>
    <script>

        // 获取画笔
        var painter = $$('#painter').attr({
            "width": 700,
            "height": 500
        }).painter();

        // 绘制方法
        var doit = function (datas) {

            // 首先查找页面中的rect
            var imageObject = $$('rect');

            // 然后把数据绑定到rect结点上，返回的是更新对象
            var update = imageObject.data(datas);

            // 因为页面中rect结点可能不够，不足的进行补充
            var enter = update.enter('<rect>').appendTo('#painter');

            // 多余的删除
            update.exit().remove();

            // 一切准备好了，进行绘制
            $$([imageObject, enter]).loop(function (data, index, target) {

                // 绘制图像
                // data是当前结点对象target维护的数据，index是当前结点对象序号

                painter.bind(target).fillRect(index * (700 / datas.length) + 2, 500 - data, 700 / datas.length - 4, data);


            });
        };

        function startUp() {

            // 先确定条目个数
            var num = (Math.random() * 30).toFixed(0) - -5;

            var datas = [];
            for (let i = 0; i < num; i++) {
                datas.push(Math.random() * 500);
            }

            doit(datas);

        }

        startUp();
        setInterval(startUp, 1000);

    </script>
</body>

</html>
